<template>
  <div class="employee-add">
    <!-- 添加园员工 -->
    <div class="form-section employee-add-main">
      <div class="employee-add-setting">添加人员设置</div>
      <Form :model="createForm" 
      ref="createForm" 
      labi-width="100px" 
      class="demo-ruleForm"
      :rules="createValidate"
      >
        <div class="form-part">
          <div class="part-item">
            <div class="part-title">个人信息</div>
            <div class="form-row">
              <div class="row-left">
                <FormItem label="姓名" prop="name" :label-width="150">
                  <i-input v-model="createForm.name" class="form-input300"></i-input>
                </FormItem>
              </div>
              <div class="row-right">
                <FormItem label="性別" prop="name" :label-width="150">
                   <RadioGroup v-model="createForm.gender">
                      <Radio label="男" ></Radio>
                      <Radio label="女"></Radio>
                  </RadioGroup>
                </FormItem>
              </div>
            </div>
            <div class="form-row">
              <div class="row-left">
                <FormItem label="手机号码" prop="mobile" :label-width="150">
                  <i-input v-model="createForm.mobile" class="form-input300"></i-input>
                </FormItem>
              </div>
              <div class="row-right">
                <FormItem label="个人邮箱" prop="email" :label-width="150">
                  <i-input v-model="createForm.email" class="form-input300"></i-input>
                </FormItem>
              </div>
            </div>
            <div class="form-row">
              <div class="row-left">
                <FormItem label="证件类型" prop="id_type" :label-width="150">
                  <i-select v-model="createForm.id_type" placeholder="请选择" class="form-input300">
                    <Option
                    v-for="(item,index) in credentials"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </Option>
                  </i-select>
                </FormItem>
                <div class="replenish">
                  管理证件类型，
                  <a href>点击这里</a>
                </div>
              </div>
              <div class="row-right">
                <FormItem label="证件号码" prop="id_no" :label-width="150">
                  <i-input v-model="createForm.id_no" class="form-input300"></i-input>
                </FormItem>
              </div>
            </div>
          </div>

          <div class="form-row">
              <div class="row-left">
                <FormItem label="年龄" prop="age" :label-width="150">
                  <i-input v-model="createForm.age" type="tel" class="form-input300"></i-input>
                </FormItem>
              </div>
              <div class="row-right">
                <FormItem label="工作年限" prop="email" :label-width="150">
                  <i-input v-model="createForm.email" class="form-input300"></i-input>
                </FormItem>
              </div>
            </div>


            <div class="form-row">
              <div class="row-left">
                <FormItem label="最高学历" prop="mobile" :label-width="150">
                  <i-input v-model="createForm.mobile" class="form-input300"></i-input>
                </FormItem>
                <div class="replenish">
                  管理学历，
                  <a href>点击这里</a>
                </div>
              </div>
              <div class="row-right">
                <FormItem label="毕业院校" prop="email" :label-width="150">
                  <i-input v-model="createForm.email" class="form-input300"></i-input>
                </FormItem>
              </div>
            </div>


            <div class="form-row">
              <div class="row-left">
                <FormItem label="毕业专业" prop="mobile" :label-width="150">
                  <i-input v-model="createForm.mobile" class="form-input300"></i-input>
                </FormItem>
              </div>
              <div class="row-right">
                <FormItem label="最近工作单位" prop="email" :label-width="150">
                  <i-input v-model="createForm.email" class="form-input300"></i-input>
                </FormItem>
              </div>
            </div>

          <!-- 入职信息 -->
          <div class="part-item">
            <div class="part-title">入职信息</div>
            <div class="form-row">
              <div class="row-left">
                <FormItem label="入职时间" prop="entry_time" :label-width="150">
                  <DatePicker
                    v-model="createForm.entry_time"
                    :options="joinDate"
                    type="date"
                    class="form-input300"
                    placeholder="选择日期"
                  ></DatePicker>
                </FormItem>
              </div>
              <div class="row-right">
                <FormItem label="试用期" prop="probation_period" :label-width="150">
                  <i-select v-model="createForm.probation_period" placeholder="请选择" class="form-input217">
                    <i-option value="试用">试用</i-option>
                    <i-option value="正式">正式</i-option>
                  </i-select>
                  <i-select v-model="createForm.probation_period_type" placeholder="个月" class="form-input75">
                    <i-option value="个月">个月</i-option>
                    <i-option value="天">天</i-option>
                  </i-select>
                </FormItem>
              </div>
            </div>
            <div class="form-row">
              <div class="row-left">
                <FormItem label="合同公司" prop="company" :label-width="150">
                  <i-select v-model="createForm.company" placeholder="请选择" class="form-input300">
                    <i-option value="试用">试用</i-option>
                    <i-option value="正式">正式</i-option>
                  </i-select>
                  <Icon type="ios-add-circle-outline" size="30" class="form-option-add-btn" @click="showmodal" />
                </FormItem>
              </div>
              <div class="row-right">
                <FormItem label="部门" prop="department" :label-width="150">
                  <i-select v-model="createForm.department" placeholder="请选择" class="form-input300">
                    <i-option value="试用">试用</i-option>
                    <i-option value="正式">正式</i-option>
                  </i-select>
                  <Icon type="ios-add-circle-outline" size="30" class="form-option-add-btn" @click="showmodal" />
                </FormItem>
              </div>
            </div>
            <div class="form-row">
              <div class="row-left">
                <FormItem label="职务" prop="post" :label-width="150">
                  <i-select v-model="createForm.post" placeholder="请选择" class="form-input300">
                    <i-option value="试用">试用</i-option>
                    <i-option value="正式">正式</i-option>
                  </i-select>
                  <Icon type="ios-add-circle-outline" size="30" class="form-option-add-btn" @click="showmodal" />
                </FormItem>
              </div>
              <div class="row-right">
                <FormItem label="岗位" prop="position" :label-width="150">
                  <i-select v-model="createForm.position" placeholder="请选择" class="form-input300">
                    <i-option value="试用">试用</i-option>
                    <i-option value="正式">正式</i-option>
                  </i-select>
                  <Icon type="ios-add-circle-outline" size="30" class="form-option-add-btn" @click="showmodal" />
                </FormItem>
              </div>
            </div>
            <div class="form-row">
              <div class="row-left">
                <FormItem label="职级" prop="post_level" :label-width="150">
                  <i-select v-model="createForm.post_level" placeholder="" class="form-input300">
                    <i-option value="试用">试用</i-option>
                    <i-option value="正式">正式</i-option>
                  </i-select>
                  <!-- <Icon type="ios-add-circle-outline" size="30" class="form-option-add-btn" @click="showmodal" /> -->
                    
                </FormItem>
                <div class="replenish">
                  管理职级，
                  <a href>点击这里</a>
                </div>
              </div>
              <div class="row-right">
                <FormItem label="工作性质" prop="work_nature" :label-width="150">
                  <i-select v-model="createForm.work_nature" placeholder="" class="form-input300">
                    <i-option value="试用">试用</i-option>
                    <i-option value="正式">正式</i-option>
                  </i-select>
                </FormItem>
                <div class="replenish">
                  管理工作性质，
                  <a href>点击这里</a>
                </div>
              </div>
            </div>
            <div class="form-row">
              <div class="row-left">
                <FormItem label="员工状态" prop="employee_status" :label-width="150">
                  <i-select v-model="createForm.employee_status" placeholder="请选择" class="form-input300">
                    <i-option value="试用">试用</i-option>
                    <i-option value="正式">正式</i-option>
                  </i-select>
                </FormItem>
              </div>
              <div class="row-right">
                <FormItem label="工号" prop="work_no" :label-width="150">
                  <i-input v-model="createForm.work_no" class="form-input300"></i-input>
                </FormItem>
              </div>
            </div>
            <div class="form-row">
              <div class="row-left">
                <FormItem label="工作地点" prop="work_place" :label-width="150">
                  <i-select v-model="createForm.work_place" placeholder="请选择" class="form-input300">
                    <i-option value="试用">试用</i-option>
                    <i-option value="正式">正式</i-option>
                  </i-select>
                  <Icon type="ios-add-circle-outline" size="30" class="form-option-add-btn" @click="showmodal" />
                </FormItem>
              </div>
              <div class="row-right">
                <FormItem label="工作城市" prop="work_city" :label-width="150">
                  <i-select v-model="createForm.work_city" placeholder="请选择" class="form-input300">
                    <i-option value="试用">试用</i-option>
                    <i-option value="正式">正式</i-option>
                  </i-select>
                </FormItem>
              </div>
            </div>
            <div class="form-row">
              <div class="row-left">
                <FormItem label="招聘渠道" prop="attendance_no" :label-width="150">
                  <i-input v-model="createForm.attendance_no" class="form-input300"></i-input>
                </FormItem>
              </div>
              
            </div>
            <!-- <div class="form-row">
              <div class="row-lone">
                <FormItem label="邀请开通员工端" prop="name" :label-width="150">
                  <i-switch v-model="switch1" class="switch" />
                  <div class="desc">通过短信邀请员工开通员工端</div>
                </FormItem>
              </div>
            </div>
            <div class="form-row">
              <div class="row-lone">
                <FormItem label="发送入职登记" prop="name" :label-width="150">
                  <i-switch v-model="switch1" class="switch" />
                  <div class="desc">通过短信和邮件给员工发送入职登记邀请</div>
                </FormItem>
              </div>
            </div> -->
            <!-- <div class="form-row">
              <div class="row-lone">
                <FormItem label prop="name" :label-width="150">
                  <div class="join-sign-wrap">
                    <ul class="sign-template-list">
                      <li class="sign-template-item sign-template-active">
                        <img src="@/assets/images/sign-template.png" alt class="template-icon" />
                        <img
                          src="@/assets/images/sign-template-default.png"
                          alt
                          class="template-default-icon"
                        />
                        <div class="base-info">
                          <p class="template-title">入职登记</p>
                          <p class="template-desc">邀请待入职人员填写入职登记，提高入职率</p>
                          <Poptip trigger="hover" content="content" class="preview">
                            <a href>预览</a>
                            <div slot="content">
                              <img src="@/assets/images/sign-template.png" alt class="preview-img" />
                            </div>
                          </Poptip>
                        </div>
                      </li>
                    </ul>
                    <div class="template-footer">
                      <div class="no-border template-footer-setting-btn">
                        <Icon
                          type="ios-settings-outline"
                          size="18"
                          class="template-footer-setting-icon"
                        />设置入职登记
                      </div>
                    </div>
                  </div>
                </FormItem>
              </div>
            </div> -->
          </div>
          
            <div class="form-row footer-row">
              <div class="row-center">
                 <div class="form-footer-wrap">
                      <Button type="default" class=" btn-font-green-border" size="large">保存并继续添加</Button>
                      <Button type="primary" size="large" @click="save">保存</Button>
                 </div>
              </div>
            </div>
          <!-- 入职登记 -->
        </div>
      </Form>

      <!-- modal 添加职务 职级-->
      <Modal v-model="modal1" title="添加职务" @on-ok="ok" @on-cancel="cancel">
        <Form>
          <FormItem label="职务名称" prop="name" :label-width="92">
            <i-input v-model="createForm.name" class="form-input300" placeholder="请输入..."></i-input>
          </FormItem>
          <FormItem label="职务编码" prop="name" :label-width="92">
            <i-input v-model="createForm.name" class="form-input300" placeholder="请输入..."></i-input>
          </FormItem>
          <FormItem label="职务说明" prop="name" :label-width="92">
            <i-input type="textarea" v-model="createForm.name" class="form-input300" placeholder="请输入..."></i-input>
          </FormItem>
        </Form>
      </Modal>
    </div>
  </div>
</template>
<script>
export default {
  name: "employee-add",
  data() {
    return {
      genderRadio: "1",
      credentials: [
        {
          value: "身份证",
          label: "身份证"
        },
        {
          value: "护照",
          label: "护照"
        },
        {
          value: "军官证",
          label: "军官证"
        },
        {
          value: "其他",
          label: "其他"
        }
      ],
      modal1: false,
      switch1: "",
      value1: "2020-10-20",
      credentialValue: "",
      joinDate: {
        shortcuts: [
          {
            text: "今天",
            value() {
              return new Date();
            },
            onClick: picker => {
              this.$Message.info("Click today");
            }
          },
          {
            text: "昨天",
            value() {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              return date;
            },
            onClick: picker => {
              this.$Message.info("Click yesterday");
            }
          },
          {
            text: "一星期前",
            value() {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              return date;
            },
            onClick: picker => {
              this.$Message.info("Click a week ago");
            }
          }
        ]
      },

      createForm: {
        name: "",
        gender: "",
        mobile:"",
        email:"",
        id_type:"",
        id_no:"",
        entry_time:"",
        probation_period:"",
        post:"",
        position:"",
        post_level:"",
        work_nature:"",
        employee_status:"",
        work_no:"",
        work_place:"",
        work_city:"",
        attendance_no:"",
        work_email:"",
      },
      createValidate:{
        
      }
    };
  },
  methods:{
    showmodal(){
      this.modal1 = true;
    },
    cancel(){

    },
    ok(){
      
    },
    save(){
      this.$refs["createForm"].validate((valid) => {
            if (valid) {
                  this.$store
                .dispatch("personnel/employeecreate", this.createForm)
                .then(res => {
                  console.log(res);
                  if (res.e == "9999") {
                    this.personInfo = res.data;
                  }
                });
            } else {
                // this.$Message.error('Fail!');
            }
        })
      
      
    }
  }
};
</script>
<style lang="scss" scoped src="../add.scss">
</style>